<template>
  <div class="container-page-personal">
    <div class="headerInfo">
      <div class="headerImg">
        <img :src="userInfo.avatar" alt class="txx">
      </div>
      <div class="headeName">{{ userInfo.nickname }}</div>
    </div>

    <div class="cont2">
      <itemSlotCard title="我的订单" icon="订单">
        <div class="group-icon-order">
          <div class="item-btn-allorder" @click="routerLink('allOrder',0)">全部订单
            <van-icon name="arrow" />
          </div>
          <img src="@/assets/dfk.png" @click="routerLink('allOrder',1)">
          <img src="@/assets/dfh.png" @click="routerLink('allOrder',2)">
          <img src="@/assets/dsh.png" @click="routerLink('allOrder',3)">
          <img src="@/assets/sh.png" @click="routerLink('allOrder',5)">
        </div>
      </itemSlotCard>

      <itemSlotCard title="我的服务" icon="客服">
        <div class="group-icon-service">
          <img src="@/assets/add.png" @click="routerLink('address')">
          <img src="@/assets/serve.png" @click="show = true">
        </div>
      </itemSlotCard>
    </div>

    <!-- 客服弹窗 -->
    <div v-show="show" class="item-alert" @click="show = false">
      <div class="cont-tk">
        <div class="title"><img :src="$service_png"></div>
        <img src="@/assets/close.png" class="close">
      </div>
    </div>
    <img class="item-copy" src="@/assets/copy.png">
    <!-- tabbar -->
    <itemTabbar now-page="3" />
  </div>
</template>

<script>
// api
import { userInfo } from '@/api/miva'
// item
import itemTabbar from '@/components/miva-item/item-tabbar'
import itemSlotCard from '@/components/miva-item/item-slot-card'
export default {
  components: { itemTabbar, itemSlotCard },
  data() {
    return {
      show: false,
      userInfo: {}
    }
  },
  async mounted() {
    await this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const res = (await userInfo()) || {}
      this.userInfo = res.data || {}
    },
    routerLink(name, nowPage) {
      this.$router.push({ name, params: { nowPage }})
    }
  }
}
</script>

<style lang="less" scoped>
.container-page-personal {
  .item-copy{
    height: 30px;
    display: block;
    margin:auto;
    position: relative;
    bottom: 10px;
  }
  .group {
    &-icon-order {
      display: flex;
      justify-content: space-around;
      img {
        transform: scale(0.6, 0.6);
      }
    }
    &-icon-service {
      display: flex;
      img {
        transform: scale(0.6, 0.6);
      }
    }
  }
  .item {
    &-btn-allorder {
      position: absolute;
      right: 10px;
      top: -30px;
      white-space: nowrap;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>

<style lang="less">
.container-page-personal {
  width: 100%;
  .headerInfo {
    width: 100%;
    height: 16vh;
    padding: 10px;
    display: flex;
    background: #fff;
    .headerImg {
      width: 80px;
      height: 80px;
      overflow: hidden;
      padding: 10px;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .headeName {
      padding-top: 20px;
      font-size: 16px;
    }
  }
  .cont2 {
    width: 100%;
    min-height: calc(100vh - 16vh - 95px);
    padding: 4vw;
    background: #f5f6f8;
    .order {
      width: 100%;
      background: #fff;
      margin: 0 auto 5%;
      .myOrder {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        .orderName {
          font-size: 16px;
          font-weight: bold;
        }
        .more {
          display: flex;
          color: #999999;
          font-size: 14px;
        }
      }
      .orderIcon {
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
        img {
          width: 76%;
        }
      }
    }
    .serve {
      width: 100%;
      background: #fff;
      padding: 10px;
      .serveTitle {
        font-weight: bold;
      }
      .serveIcon {
        padding: 15px 0;
        display: flex;
        img {
          width: 76%;
        }
      }
    }
  }
  .item-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
    .cont-tk {
      position: absolute;
      width: 80%;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      img {
        width: 100%;
      }
      .close {
        width: 10%;
        top: 80vw;
        left: 46%;
        position: absolute;
      }
      .title {
        padding: 50px 40px;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
</style>
